<template>
    <div class="card">
        <div class="title flex align-items space-between">
            <div class="left">订单号：{{ info.order_sn }}</div>
            <div class="btns flex align-items flex-end">
                <span v-if='info.status_text'>{{ info.status_text }}</span>
                <span v-if='info.status_info'>{{ info.status_info.text }}</span>
                <!--<div class="btn fn-ctr">未出库</div>-->
            </div>

        </div>
        <div class="total-price flex align-items space-between">
            <div class="left">总价：</div>
            <div class="right flex1">¥{{ info.money }}</div>
        </div>
        <div class="total-price flex align-items space-between">
            <div class="left">订单时间：</div>
            <div class="right flex1 right-time">{{ info.add_time_info }}</div>
        </div>
        <div class="info flex align-items space-around">
            <div class="start flex1">
                <div class="address ell2" v-if='info.delivery'>{{ info.delivery.address }}</div>
                <div class="user" v-if='info.delivery'>{{ info.delivery.name }}</div>
            </div>
            <div class="line">
                <div class="txt">寄往</div>
                <img :src="lineImg" alt="">
            </div>
            <div class="end flex1">
                <div class="address" v-if='info.destination'>{{ info.destination.address }}</div>
                <div class="user" v-if='info.destination'>{{ info.destination.name }}</div>
            </div>
        </div>
        
    </div>
</template>

<script>
    import lineImg from '@/assets/toline.png';
    export default {
        props:['info'],
        data(){
            return {
                lineImg,
            }
        },
    }
</script>

<style lang="less" scoped>
.total-price{
     width: 100%;
    height: auto;
    border-radius: 5px;
    padding: 2px 0;
    margin:0 auto; 
    .left{
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #999999;
        margin-right: 5px;
    }
    .right{
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #FF5522;
    }
    .right-time{
        color: #999999;
        font-family: PingFang SC;
        font-weight: 400;
    }
}
    .card{
        width: 100%;
        height: auto;
        overflow: hidden;
        background: #FFFFFF;
        box-shadow: 0px 0px 8px 1px rgba(86, 82, 255, 0.15);
        border-radius: 5px;
        padding: 0 11px;
        .title{
            width: 100%;
            padding: 9px 0 4px;
            .left{
                font-size: 12px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #999999;
            }
            .left-time{
                margin-left: 8px;
            }
            .btns{
                span{
                    font-size: 12px;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #FCAC38;
                }
            }
            .btn{
                width: auto;
                padding: 0 5px;
                height: 20px;
                background: #20D26A;
                box-shadow: 0px 2px 7px 0px rgba(32, 210, 106, 0.44);
                border-radius: 5px;
                margin: 0;
                font-size: 11px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #FFFFFF;
                margin-left: 10px;
            }
        }
        .info{
            width: 100%;
            height: auto;
            padding: 5px 0 10px;
            .line{
                width: 82px;
                height: auto;
                .txt{
                    width: 100%;
                    text-align: center;
                    font-size: 12px;
                    font-family: PingFang SC;
                    font-weight: 400;
                    color: #7277F9;
                }
            }
            .address{
                width: 100%;
                text-align: center;
                font-size: 16px;
                font-family: PingFang SC;
                font-weight: bold;
                color: #333333;
            }
            .user{
                width: 100%;
                text-align: center;
                font-size: 12px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #999999;
            }
        }
    }
</style>